<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量导入用户</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
	<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
	<style>
		.div_running_processing_gradefa{
			width: 800px;
			height: 400px;
			
			position: absolute;
			overflow: hidden;
			
		}
		.div_running_processing_fa{
			width: 115%;
			height: 115%;
			filter: blur(40px);
			background-image: url(../img/bg.jpg);
			position: absolute;
			overflow: hidden;
			
		}
		.div_running_processing{
			width: 730px;
			height: 400px;
			position: absolute;
			color: whitesmoke;
			padding-left: 6em;
			overflow: auto;
			background-color:rgba(255,255,255,0.4);
		}
		.p_running_success_info{
			color:green;
			margin-top:7px;
			font-size: 17px;
		}
		.p_running_fail_info{
			color:red;
			font-size: 17px;
			margin-top:7px;
		}
	</style>
</head>
<body>
	<input type="file" id="excel-file">
	<!--虚化背景-->
	<div class="div_running_processing_gradefa">
		<div class="div_running_processing_fa"></div>
	</div>
	<!--内容显示-->
	<div class="div_running_processing" id="div_running_content">
		
	</div>
<script>
    
</script>
</body>
<script src="../layuiadmin/layui/layui.js"></script>  
<script>
  
  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','table', 'laydate'], function(){
    var table = layui.table
    ,form = layui.form
    ,$ = layui.$
    ,admin = layui.admin;
    
    
  //给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
    $('#excel-file').change(function(e) {
        var files = e.target.files;
        var fileReader = new FileReader();
        fileReader.onload = function(ev) {
            try {
                var data = ev.target.result
                var workbook = XLSX.read(data, {
                    type: 'binary'
                }) // 以二进制流方式读取得到整份excel表格对象
                var persons = []; // 存储获取到的数据
            } catch (e) {
                console.log('文件类型不正确');
                return;
            }
            // 表格的表格范围，可用于判断表头是否数量是否正确
            var fromTo = '';
            // 遍历每张表读取
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    fromTo = workbook.Sheets[sheet]['!ref'];
                    console.log(fromTo);
                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    break; // 如果只取第一张表，就取消注释这行
                }
            }
            //开始处理相关数据
			var errorStr = "以下几行出现导入错误，请核查信息内容格式：\n";//这个字符串是为了显示出错的录入信息
			var errorStatus = 0;
			var div_running = document.getElementById("div_running_content");
			
			var i = 0;
			var running_speed = 100;
			function doWork() {  
				if(persons[i].number==undefined||persons[i].card==undefined||persons[i].name==undefined||persons[i].phone==undefined||persons[i].email==undefined||persons[i].role==undefined){
					errorStatus = 1;
					errorStr = errorStr + "第_"+(i+1)+"_行\n";
					var number = persons[i].number.replace(/\s+/g,"");
					var card = persons[i].card.replace(/\s+/g,"");
					var name = persons[i].name.replace(/\s+/g,"");
					div_running.innerHTML = div_running.innerHTML + ' <p class = "p_running_fail_info">················编号_'+number+'_'+card+'_'+name+'_导入失败，请检查！</p>';
					i += 1;
					if (i < persons.length) {
					  setTimeout(doWork, running_speed);
					}
					return;
				}
				var number = persons[i].number.replace(/\s+/g,"");
				var card = persons[i].card.replace(/\s+/g,"");
				var name = persons[i].name.replace(/\s+/g,"");
				var phone = persons[i].phone.replace(/\s+/g,"");
				var email = persons[i].email.replace(/\s+/g,"");
				var role = persons[i].role.replace(/\s+/g,"");
				if(number==""||card==""||name==""||phone==""||email==""||role==""){
					errorStatus = 1;
					errorStr = errorStr + "第_"+(i+1)+"_行\n";
					div_running.innerHTML = div_running.innerHTML + ' <p class = "p_running_fail_info">················编号_'+number+'_'+card+'_'+name+'_导入失败，请检查！</p>';
					i += 1;
					if (i < persons.length) {
					  setTimeout(doWork, running_speed);
					}
					return;
				}else{
					//组装进ajax发送给后台
					$.ajax({
    		     		url: '/user/import_user_action',
    		      		type: 'POST',
    		  			data:{"uid":card,name:name,phone:phone,email:email,"tag":role},
    		      		success: function (data) {
    	   					if(data === 1){
    	   						div_running.innerHTML = div_running.innerHTML + ' <p class = "p_running_success_info">················编号_'+number+'_'+card+'_'+name+'_已经成功导入注册列表！</p>';
    	   			 		}
    	   		   			else if(data == 0){
    	   		   				div_running.innerHTML = div_running.innerHTML + ' <p class = "p_running_fail_info">················编号_'+number+'_'+card+'_'+name+'_导入失败，请检查！</p>';
    	   					}else{
    	   						div_running.innerHTML = div_running.innerHTML + ' <p class = "p_running_fail_info">················编号_'+number+'_'+card+'_'+name+'_导入失败，信息错误/用户已经存在！</p>';
    	   					}
    		      		}
    				});//AJAX结束
					//组装结束
				}
				i += 1;
				if (i < persons.length) {
				  setTimeout(doWork, running_speed);
				}else if(i == persons.length){
					if(errorStatus == 1){
						div_running.innerHTML = div_running.innerHTML + ' <p class = "p_running_fail_info">········共处理 '+i+' 行数据，其中'+errorStr+'</p>';
					}
				}
			};
			setTimeout(doWork, running_speed);//使用setTimeout代替for循环，解决js执行线程和gui渲染线程相互排斥阻塞的问题
			//值得注意的是--下面如果有代码可能会先于setTimeout执行，这依旧是线程问题
			
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    });
    
  });
  </script>
</html>